<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册首页</title>
    <link type="text/css" rel="stylesheet" href="css/login_css.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/jquery-cookie.js"></script>
    <script>
        $(function () {
            var flag=-1;
            //输入手机号码
            $(".form-click").click(function () {
                //判断手机号码的格式
                var reg=/^1[3-9]\d{9}$/;
                if(!reg.test($("input[name='input-phone']").val()))
                {
                    $("input[name='input_1']").val("格式错误");
                    $(".i-status").hide();//隐藏输入框下的提示框

                }
                else{
                    flag=1;
                    $(".i-status").show();//显示提示信息
                    $("input[name='input_1']").hide();//隐藏确认图标
                }
            })
            //点击下一步
            $(".step_next").click(function () {
                //确定手机号码是否符合格式
                if(flag==1)
                {
                    //判断该手机号码是否已经被注册
                    $.ajax({
                        url:"/user/verifyPhoneNumber",
                        type:"post",
                        data:{phoneNumber:$("input[name='input-phone']").val(),
                        },
                        datatype:JSON,
                        //对比数据库已经存在的手机号码，返回一个确认值
                        success:function (result) {
                            if(result.code==0){
                                window.location.href="http://localhost:8080/user/Login_2.html";
                                $.cookie("phoneNumber",$("input[name='input-phone']").val(),{path:'/'});

                            }else{
                                //手机号码已经存在，弹出提示信息
                                if(confirm(result.msg)){
                                    window.location.href="http://localhost:8080/user/login.html";
                                }else{
                                    window.location.reload();
                                }

                            }
                        }
                    })

                }
                else{
                    alert("手机号码验证失败");
                }


            })

        })
    </script>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
<div id="header">
    <div class="w">
        <a href="www.jd.com" class="logo">
        </a>
        <div class="logo_title">欢迎注册</div>
        <div class="have_accoount">已有账号？
            <a href="login.html" font-color="red">请登录> </a>
        </div>
    </div>
</div>
<div id="container">
    <div class="progress">
        <div class="pro-step">
            <span class="step-index">1</span>
            <p class="step-desc">验证手机号</p>
        </div>
        <div class="pro-line"></div>
        <div class="pro-step_1">
            <span class="step-index_2">2</span>
            <p class="step-desc">填写账号</p>
        </div>
        <div class="pro-line_1"></div>
        <div class="pro-step_2">
            <span class="step-index_2">3</span>
            <p class="step-desc">注册成功</p>
        </div>
    </div>
    <div id="main">
        <div class="reg-form">
            <form action=""  method="=post">
                <div id="step-wrap">
                    <div class="item_1">
                        <div class="form-item">
                            <label class="select-country">中国0086
                                <a href="#" class="arrow"></a>
                            </label>
                            <div class="item_input">
                                <input type="text" class="form-phone" name="input-phone" placeholder="建议使用常用的手机号码" onfocus="this.placeholder=''">
                                <div class="i-status"></div>
                            </div>
                        </div>
                        <input name="input_1" value="" type="text" class="input_1" >
                    </div>
                    <div class="item_2">
                        <div class="form-click">点击按钮进行验证
                        </div>


                    </div>
                    <div class="item_3">

                        <div class="step_next">

                            <a href="#"  >下一步</a>

                        </div>
                    </div>
                </div>
            </form>
            <div class="other">
                <a href="#" class="other_item">
                    <i class="reg-other"></i>
                    企业用户注册
                </a>
                <a href="#" class="other_item_1">
                    <i class="reg-other_1"></i>
                    海外用户注册

                </a>

            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="links">
        <a href="#">关于我们</a> &nbsp; |&nbsp;
        <a href="#">联系我们</a> &nbsp; |&nbsp;
        <a href="#">人才招聘</a> &nbsp;|&nbsp;
        <a href="#">商家入驻</a> &nbsp;|&nbsp;
        <a href="#">广告服务</a> &nbsp; |&nbsp;
        <a href="#">手机京东</a> &nbsp; |&nbsp;
        <a href="#">友情链接</a> &nbsp;|&nbsp;
        <a href="#">销售联盟</a> &nbsp;|&nbsp;
        <a href="#">京东社区</a> &nbsp;|&nbsp;
        <a href="#">京东公益</a> &nbsp;|&nbsp;
        <a href="#">English Site</a>
    </div>
    <div>
        Copyright©2004-2019 &nbsp;&nbsp;京东JD.com &nbsp;版权所有
    </div>


</div>


</body>
</html>